<template>
	<view>
		<view class="bw-header-body">
			<text class="bw-title">提现到当前账号</text>
			<view class="bw-flex-u">
				<view>
					<image :src="userInfo.avatar" v-if="userInfo.avatar"></image>
					<image src="../../../static/Mine/5.png" v-else></image>
					<text>{{userInfo.username}}</text>
				</view>
				<text class="bw-price">余额 ￥ {{userInfo.money}}</text>
			</view>
		</view>

		<view class="bw-withdraw" @click="detail">
			<text>提现明细</text>
		</view>

		<view class="bw-view-price">
			<view v-for="(a_item,a_index) in prices" @click="checkbox(a_index)" :class="{'pitch':index == a_index}">
				<text>{{a_item.price}} 元</text>
			</view>
			<view class="active" @click="all" :class="{'pitch':index == null}">
				<text>全部</text>
			</view>
		</view>
		
		<view class="withdraw_type" @click="swItch = true">
			<text>提现方式</text>
			<text class="iconfont icon-qianjinxiayige more"></text>
		</view>
		
		<view class="bw-input">
			<input type="text" placeholder="请输入您的账号" v-model="req.account" />
		</view>

		<button class="bw-button" :class="{'show':req.account}" @click="affirm" :disabled="req.account ? false : true">提现</button>
	
		<screen :swItch="swItch" @Change="Change" :mode="'bottom'" :bottomHeight="530">
			<view class="withdraw">
				<text class="withdraw_title">选择提现方式</text>
				<view v-for="(a_item,a_index) in wayType" :key="a_index" class="withdraw_list" @click="getwithdrawType(a_item)">
					<view class="withdraw-flex">
						<image :src="a_item.url"></image>
						<text>{{a_item.name}}</text>
					</view>
					<label class="radio">
						<radio :checked="a_item.select" style="transform:scale(0.8)" />
					</label>
				</view>
			</view>
		</screen>
	</view>
</template>

<script>
	import {amount_apply} from '../../../api/share.js';
	import {userdetail} from '../../../api/mine.js';
	import screen from 'components/bw-screen/bw-screen.vue';
	export default {
		components:{
			screen
		},
		data() {
			return {
				prices: [{
					id: 0,
					price: 2
				}, {
					id: 1,
					price: 10
				}, {
					id: 2,
					price: 100
				}, {
					id: 3,
					price: 500
				}, {
					id: 4,
					price: 1000
				}],
				index:0,
				wayType:[ //提现方式
					{
						type:'WeChat', //微信
						url:'../../../static/withdraw/WeChat.png',
						name:'微信',
						select:true
					},{
						type:'Alipay', //支付宝
						url:'../../../static/withdraw/Alipay.png',
						name:'支付宝',
						select:false
					},{
						type:'Bank', //银行卡
						url:'../../../static/withdraw/Bank.png',
						name:'银行卡',
						select:false
					}
				],
				req:{
					amount:'', //金额
					account:'', //账户
					type:'', //提现方式 方式：0=系统, 1=微信, 2=支付宝, 3=银行卡, 4=其它
					mark:'', //描述
				},
				swItch:false, //是否开启提现类型弹框
				userInfo:{}
			}
		},
		mounted() {
			this.UserInfo();
		},
		methods: {
			//提现
			async affirm() {
				if (this.req.account) {
					if(this.req.type == "")this.req.type = 1;
					if(this.req.amount == "")this.req.amount = this.prices[0].price;
					const res = await amount_apply(this.req);
					if(res.status == 200){
						this.UserInfo();
						uni.showToast({
							title: '提现成功！',
							duration: 2000
						});
					}
				} else {
					uni.showToast({
						title: '请填写要提现的账号',
						icon: 'none',
						duration: 2000
					});
				}
			},
			async UserInfo(){
				const res = await userdetail();
				this.userInfo = res.data;
			},
			checkbox(a_index){
				this.index = a_index;
				this.req.amount = this.prices[this.index].price;
			},
			all(){
				this.req.amount = this.userInfo.money;
				this.index = null;
			},
			detail(){
				uni.navigateTo({
					url:'./detail'
				});
			},
			Change(e){
				this.swItch = e;
			},
			getwithdrawType(a_item){
				const arr = new Array();
				this.wayType.filter(item => a_item.type == item.type ? item.select = true : item.select = false);
				switch(a_item.type){
					case "system": //系统
						this.req.type = 0;
					break;
					case "WeChat": //微信
						this.req.type = 1;
					break;
					case "Alipay": //支付宝
						this.req.type = 2;
					break;
					case "Bank": //银行卡
						this.req.type = 3;
					break;
					case "else": //其他
						this.req.type = 4;
					break;
				}
				this.swItch = false;
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "../../../iconfont.scss";
	.bw-header-body {
		width: 95%;
		padding-bottom: 30rpx;
		margin: 20rpx auto;
		border-radius: 10rpx;
		background-color: #f56565;

		.bw-title {
			font-size: 30rpx;
			color: #FFFFFF;
			display: block;
			padding: 30rpx;
		}

		.bw-flex-u {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-left: 30rpx;

			view {
				display: flex;
				align-items: center;

				text {
					color: #FFFFFF;
					font-size: 29rpx;
					padding-left: 20rpx;
				}
			}

			image {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
			}

			.bw-price {
				color: #fde778;
				font-size: 30rpx;
				padding-right: 30rpx;
			}
		}
	}

	.bw-withdraw {
		width: 95%;
		margin: 0px auto;
		border-radius: 15rpx;
		border: 1px solid #f56565;

		text {
			color: #f56565;
			padding: 15rpx;
			padding-left: 20rpx;
			display: block;
			font-size: 29rpx;
		}
	}

	.bw-view-price {
		width: 95%;
		padding-top: 50rpx;
		margin: 0rpx auto;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		view {
			width: 25%;
			padding: 15rpx;
			margin-bottom: 30rpx;
			border-radius: 20rpx;
			border: 1px solid #a0aec0;
			text-align: center;
			background-color: #edf2f7;

			text {
				font-size: 28rpx;
				color: #a8b1bc;
			}
		}

		.active {
			width: 25%;
			padding: 15rpx;
			margin-bottom: 30rpx;
			border-radius: 20rpx;
			border: 1px solid #f56565;
			background-color: #FFFFFF;
			text-align: center;

			text {
				font-size: 28rpx;
				color: #000000;
			}
		}
	}

	.bw-input {
		width: 90%;
		padding-top: 20rpx;
		margin: 0rpx auto;

		input {
			height: 80rpx;
			padding-left: 20rpx;
			color: #007AFF;
			border: 1px solid #e2e8f0;
			font-size: 29rpx;
		}
	}
	
	.withdraw_type{
		width:90%;
		height:80rpx;
		margin:0px auto;
		//border:1px solid red;
		display: flex;
		justify-content: space-between;
		align-items: center;
		text{
			font-size:28rpx;
		}
	}
	
	.bw-button {
		width: 95%;
		height: 85rpx;
		line-height: 85rpx;
		margin: 30rpx auto;
		background-color: #fab6b6 !important;
		border: none !important;
		color: #FFFFFF !important;
		font-size: 29rpx;
	}

	.show {
		background-color: #f56565 !important;
	}
	
	.pitch{
		background-color:#f56565 !important;
		border:1px solid #FFFFFF !important;
		text{
			color:#FFFFFF !important;
		}
	}
	
	.withdraw{
		width:90%;
		margin:0px auto;
		image{
			width:75rpx;
			height:75rpx;
			display: block;
		}
		.withdraw_list{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top:30rpx;
			padding-bottom:30rpx;
			border-bottom:1px solid #cccccc;
			.withdraw-flex{
				display: flex;
				align-items: center;
				text{
					font-size:28rpx;
					padding-left:15rpx;
				}
			}
		}
		.withdraw_title{
			display: block;
			margin:20rpx auto;
			text-align: center;
			font-weight:500;
			font-size:31rpx;
		}
	}
</style>
